<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="/src/layui/css/layui.css">
		
		<script src="/src/layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="/src/city-picker/city-picker.css" />
		
		<link rel="stylesheet" href="/src/css/font.css">
		<link rel="stylesheet" href="/src/css/xadmin.css">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript" src="/src/js/xadmin.js"></script>

		
	</head>
	<body>
		 <!-- <h1>账号管理</h1> -->
		 <div class="layui-tab">
		   <ul class="layui-tab-title">
		     <li class="layui-this">添加地址</li>
		     <li>我的地址</li>
		   
		   </ul>
		   <div class="layui-tab-content">
		     <div class="layui-tab-item layui-show" style="position: relative;">
		       
				<form class="layui-form layui-col-md12  layui-form-pane" lay-filter="example" method="post">
				
				  <div class="layui-form-item x-city" id="end">
				    <label class="layui-form-label">城市联动</label>
				    <div class="layui-input-inline">
				      <select name="province" lay-filter="province">
				        <option value="">请选择省</option>
				      </select>
				    </div>
				    <div class="layui-input-inline">
				      <select name="city" lay-filter="city">
				        <option value="">请选择市</option>
				      </select>
				    </div>
				    <div class="layui-input-inline">
				      <select name="area" lay-filter="area">
				        <option value="">请选择县/区</option>
				      </select>
				    </div>
				  </div>
				  
<!--				 <div class="layui-form-item">-->
<!--				 	<label class="layui-form-label">详细地址</label>-->
<!--				 	<div class="layui-input-block">-->
<!--				 		<input type="text" maxlength="12" name="detailed" required lay-verify="required" placeholder="请输入详细地址" autocomplete="off" class="layui-input">-->
<!--				 	</div>-->
<!--				 </div>-->

					<div class="layui-form-item">
						<label class="layui-form-label">地址</label>
						<div class="layui-input-block">
							<input type="text" maxlength="5" name="detailed" required lay-verify="required" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">姓名</label>
						<div class="layui-input-block">
							<input type="text" maxlength="5" name="receivername" required lay-verify="required" placeholder="请输入姓名,最大字数不超过5个" autocomplete="off" class="layui-input">
						</div>
					</div>
					  
					 <div class="layui-form-item">
					 	<label class="layui-form-label">电话</label>
					 	<div class="layui-input-block">
					 		<input type="text"  name="phonenumber"  lay-verify="phone" placeholder="请输入合法手机号码" autocomplete="off" class="layui-input">
					 	</div>
					 </div>
					 
					 <div class="layui-form-item">
					 	<label class="layui-form-label">邮编</label>
					 	<div class="layui-input-block">
					 		<input type="number"  name="postnumber"   lay-verify="s" placeholder="请输邮编" autocomplete="off" class="layui-input">
					 	</div>
					 </div>

						  <div class="layui-form-item">
						      <label class="layui-form-label">默认地址</label>
						      <div class="layui-input-block">
						        <input type="radio" name="isdefault" value="0" title="是" checked="">
						        <input type="radio" name="isdefault" value="1" title="否">
						      </div>
						    </div>
							
						<!--隐藏域用户id-->
								<div class="layui-input-block">
									<input type="text"  name="userid"   lay-verify="s" value="1"  autocomplete="off" class="layui-input">
								</div>
						<div>1</div>
			
						<!-- 		</div> -->
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="button" id="tijiao" class="layui-btn" lay-submit lay-filter="formDemo" value="立即提交"></input>
								<input type="reset" class="layui-btn layui-btn-primary" value="重置"></input>
							</div>
						</div>
				</form>
		
		     </div>
			 
			 <!--这个是查看我的地址的信息-->
		     <div class="layui-tab-item">
				 <div>
					 默认收货地址
				 </div>
				 
				 <table class="layui-table layui-form">
				     <thead>
				         <tr>
				             
				             <th>订单编号</th>
				             <th>收货人</th>
				             <th>总金额</th>
				             <th>应付金额</th>
				             
				     </thead>
				     <tbody>
				         <tr>
				             <td>2017009171822298053</td>
				             <td>老王:18925139194</td>
				             <td>7829.10</td>
				             <td>7854.10</td>      
				         </tr>
				         
				         
				     </tbody>
				 </table>
				 
				
				 
				 <!--这个是收货地址-->
				<!-- <table class="layui-hide" id="test"> </table> -->
				 
				<table class="layui-hide" id="test1" lay-filter="test11" ></table>
				 
			</div>

		   </div>
		 </div>
		
		
		 <script type="text/javascript">
		    
		    
		 <!--这个是导航栏定位-->
		 layui.use('element','jquery', 'table', function(){
		   var $ = layui.jquery;
		   var element = layui.element;
			var table = layui.table;
			var form = layui.form;//Tab的切换功能，切换事件监听等，需要依赖element模块
		  	   
		   $('.site-demo-active').on('click', function(){
		     var othis = $(this), type = othis.data('type');
		     active[type] ? active[type].call(this, othis) : '';
		   });
		   //Hash地址的定位
		   var layid = location.hash.replace(/^#test=/, '');
		   element.tabChange('test', layid);
		   
		   element.on('tab(test)', function(elem){
		     location.hash = 'test='+ $(this).attr('lay-id');
		   }); 
			 	 
		 });
		 </script>
		 
		 <!--这个是城市联动地址-->
		 <script type="text/javascript" src="/src/layui/xcity.js"></script>
		 <script>
		   layui.use(['form','code'], function(){
		     form = layui.form;
		         
		     layui.code();
		     $('#start').xcity();
		     $('#end').xcity('广东','广州市','东山区');
		   });
		 </script>
		 <!--这个是验证手机号码-->
		 <script  type="text/javascript">
			 layui.use(['form', 'layer', 'laydate', 'jquery', 'upload'], function() {
			 				var form = layui.form;
			 				var layer = layui.layer;
			 				var laydate = layui.laydate;
			 				var $ = layui.jquery;
			 				var upload = layui.upload;
							form.verify({  
							        phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须合法的11位，只能是数字！']  
							  });  
												
				
			//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					// location.reload();
					// alert("提交完毕可以添加图片")
					$.ajax({
						url:"/positions/insertMsg",
						type:'post',
						contentType: "application/json",
						data:data.field,
						dataType:'JSON',
						success:function(data){
								layer.msg(data);
						}
					})
					
					return false;
				});
			});
			 
		 </script>
		 
		 
		 
		<!-- 这是第二个表格 --> 
<!--		 <script type="text/html" id="barDemo">-->
<!--		   &lt;!&ndash; <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> &ndash;&gt;-->
<!--		   <input class="layui-btn layui-btn-danger layui-btn-xs" lay-event="moren" value="默认地址" style="width: 60px;" />-->
<!--		   <input class="layui-btn layui-btn-danger layui-btn-xs" lay-event="shanchu" value="删除" style="width: 60px;" />-->
<!--		 </script>-->
		 
		 
<!--		 <script>-->
<!--		 layui.use('table', function(){-->
<!--		   var table = layui.table;-->
		   
<!--		   // table.render({-->
<!--		   //   elem: '#test1'-->
<!--		   //   ,url:'/positions/showTable'-->
<!--		   //   ,title: '用户数据表'-->
<!--		   //   ,cols: [[-->
<!--		   //-->
<!--		   //     {field:'id', title:'ID', width:280, fixed: 'left', unresize: true, sort: true}-->
<!--		   //     ,{field:'username', title:'用户名', width:280, edit: 'text'}-->
<!--		   //     ,{field:'sex', title:'地区', width:280, edit: 'text', sort: true}-->
<!--		   //     ,{field:'city', title:'手机号', width:280}-->
<!--		   //     ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:280}]]-->
<!--			// 	,page: true-->
<!--		   // });-->
<!--		   -->
<!--		   // 监听行工具事件-->
<!--		 //   table.on('tool(test11)', function(obj){-->
<!--		 //     var data = obj.data;-->
<!--		 //     //console.log(obj)-->
<!--		 //     if(obj.event === 'moren'){-->
<!--		 //       layer.confirm('确定设为默认地址', function(index){-->
<!--		 //         // obj.del();-->
<!--			// 	 alert(obj);-->
<!--		 //         layer.close(index);-->
<!--		 //       });-->
<!--		 //     }-->
<!--			//  if(obj.event === 'shanchu'){-->
<!--			// 	 layer.confirm('是否删除', function(index){-->
<!--			// 	    obj.del();-->
<!--			// 	   layer.close(index);-->
<!--			// 	 });-->
<!--			//  }-->
<!--		 //   });-->
<!--		 // });-->
<!--		 // </script>-->
<!--		 -->
	
	
	</body>
</html>
